import * as echarts from '../../ec-canvas/echarts';
let chart = null;

function initChart(canvas, width, height, dpr) {
  const barChart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr
  });
  canvas.setChart(barChart);
  var option = {
    tooltip: {
      trigger: 'axis'
    },
    legend: {},
    grid: {
      left: 20,
      right: 20,
      bottom: 15,
      top: 40,
      containLabel: true
    },
    xAxis: {
      type: 'value'
    },
    yAxis: {
      type: 'category',
      data: [
        '市文旅局',
        '市农业农村局',
        '市商务局',
        '市工信局',
        '市发改局',
        '市教育局',
        '市交通局',
        '市卫建局'
      ]
    },
    series: [{
        name: '进行中',
        type: 'bar',
        stack: 'total',
        barWidth: 20, // 设置条形图宽度为20像素
        label: {
          show: true,
          textStyle: {
            // fontSize: 8
          }
        },
        emphasis: {
          focus: 'series'
        },
        itemStyle: {
          color: '#91cc75'
        },
        data: [280, 340, 432, 600, 300, 230, 210, 300]
      },
      {
        name: '即将超期',
        type: 'bar',
        stack: 'total',
        label: {
          show: true
        },
        emphasis: {
          focus: 'series'
        },
        itemStyle: {
          color: '#fac858'
        },
        data: [200, 212, 201, 200, 190, 330, 410, 200]
      },
      {
        name: '超期预警',
        type: 'bar',
        stack: 'total',
        label: {
          show: true
        },
        emphasis: {
          focus: 'series'
        },
        itemStyle: {
          color: '#ee6666'
        },
        data: [820, 832, 901, 934, 1290, 1330, 1320, 400]
      }
    ]
  };

  barChart.setOption(option);
  return barChart;
}
// 修改 yChart 函数（饼图初始化）
function yChart(canvas, width, height, dpr) {
  const pieChart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr
  });
  canvas.setChart(pieChart);
  var option = {
    legend: {
      top: '5%',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    backgroundColor: "#ffffff",
  series: [{
    barWidth: 20,
    label: {
      normal: {
        fontSize: 14
      }
    },
    type: 'pie',
    center: ['50%', '50%'],
    radius: ['20%', '40%'], // 确保半径设置合理
    data: [
      { 
        value: 10, 
        name: '黄牌',
        itemStyle: { color: '#fac858' } // 黄色（与“即将超期”颜色一致）
      },
      { 
        value: 20, 
        name: '绿牌',
        itemStyle: { color: '#91cc75' } // 绿色（与“进行中”颜色一致）
      }
    ]
  }]
  };
  pieChart.setOption(option);
  return pieChart;
}
function gps(canvas, width, height, dpr) {
  const barChart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr
  });
  canvas.setChart(barChart);
  
  // 添加 const 声明
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
       top: 10, // 显式设置顶部距离为10px（默认可能为60px）
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'value'
    },
    yAxis: {
      type: 'category',
      data: ['会议服务中心', '联通公司', '移动公司', '电信公司', '市创城办', '市发改办', '市交通局'] // 可改为中文
    },
    series: [
      {
        barWidth: 20,
        name: '数据量',
        type: 'bar',
        stack: 'total',
        label: {
          show: true
        },
        emphasis: {
          focus: 'series'
        },
        data: [820, 832, 901, 934, 1290, 1330, 1320]
      }
    ]
  };

  barChart.setOption(option);
  return barChart;
}
Page({
  // 监听 scroll-view 的滚动事件
  onScrollViewScroll(e) {
    const scrollTop = e.detail.scrollTop;
    const show = scrollTop > 200;
    console.log('滚动距离：', scrollTop, '是否显示按钮：', show); // 新增日志
    if (show !== this.data.showBackTop) {
      this.setData({ showBackTop: show });
    }
  },
  backToTop() {
    // 控制 scroll-view 滚动到顶部
    this.setData({
      scrollTop: 0
    });
    // 隐藏按钮
    this.setData({
      showBackTop: false
    });
  },
  data: {
    showBackTop: false,
    scrollTop: 0, // 绑定到 scroll-view 的 scroll-top
    currentAnchor: '', // 用于绑定scroll-into-view的锚点变量
    n1: [
      {
        text: '重点工作',
        value: 0
      },
      {
        text: '项目进展',
        value: 1
      },
      {
        text: '经济指标',
        value: 2
      },
    ],
    n2: [{
        text: '数智漠河',
        value: 0
      },
      {
        text: '数智治理',
        value: 1
      },
      {
        text: '数智农文旅',
        value: 2
      },
      {
        text: '数智农业',
        value: 3
      },
      {
        text: '数智商城',
        value: 4
      },
      {
        text: '数智惠民',
        value: 5
      },
      {
        text: '数智安全',
        value: 6
      },
      {
        text: '数智党建',
        value: 7
      },
    ],
    n3: [{
        text: '全部商品',
        value: 0
      },
      {
        text: '新款商品',
        value: 1
      },
      {
        text: '活动商品',
        value: 2
      },
    ],
    value1: 0,
    ec: {
      onInit: initChart,
    },
    ey: { onInit: yChart },
    gps:{onInit:gps},
    ecBar: {
      // 如果想要禁止触屏事件，以保证在图表区域内触摸移动仍能滚动页面，
      // 就将 disableTouch 设为 true
      disableTouch: true,
      onInit: function (canvas, width, height, dpr) {
        const barChart = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr // new
        });
        canvas.setChart(barChart);
        barChart.setOption(getBarOption());

        return barChart;
      }
    },
    zhongd: 32,
    // city: '漠河市',
    city: '西林吉镇',
    index: 0,
    array: ['美国', '中国', '巴西', '日本'],
    navTitle: '数智漠河',
    data: [{
        id: 1,
        name: "重点工作"
      },
      {
        id: 2,
        name: "项目进展"
      },
      {
        id: 3,
        name: "经济指标"
      },
    ],
    data2: [{
        id: 1,
        name: "数智治理"
      },
      {
        id: 2,
        name: "数智党建"
      },
      {
        id: 3,
        name: "数智农文旅"
      },
      {
        id: 4,
        name: "数智农业"
      },
      {
        id: 5,
        name: "数智商城"
      },
      {
        id: 6,
        name: "数智惠民"
      },
      {
        id: 6,
        name: "数智安全"
      },
    ],
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    const phoneNumber = wx.getStorageSync('phoneNumber')
    const password = wx.getStorageSync('password')
    console.log(phoneNumber);
    console.log(password);
    // 打印 navTitle 验证数据绑定
    console.log('navTitle:', this.data.navTitle);

    let selectedTown = wx.getStorageSync("selectedTown")
    let community = wx.getStorageSync("community")
    console.log(selectedTown);
    console.log(community);
    console.log(this.data.city);
    let newCity;
    if (community !== "") {
      newCity = community
    } else if (community == "" && selectedTown !== "") {
      newCity = selectedTown
    } else {
      newCity = this.data.city
    }
    // 使用 setData 方法更新 city 值，触发页面渲染
    this.setData({
      city: newCity
    });
  },
  city() {
    let selectedTown = wx.getStorageSync("selectedTown")
    let community = wx.getStorageSync("community")
    console.log(selectedTown);
    console.log(community);
    wx.navigateTo({
      url: '../../pages/city/city', //跳转页面
    })
  },
  more() {
    console.log(11);
    wx.navigateTo({
      url: '../zdgz/zdgz', // 层级正确的相对路径（根据实际目录结构调整）
    })
  },
  goToAnchor() {
    console.log(111);
    this.setData({
      currentAnchor: 'anchor-zdgz' // 对应目标区域的id
    });
    console.log(this.data.currentAnchor);
  },
  gozy(){
    console.log(111);
    this.setData({
      currentAnchor: 'anchor-zy' // 对应目标区域的id
    });
    console.log(this.data.currentAnchor);
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onReady() {
    const currentPage = getCurrentPages()[0].route;
    const tabBar = this.selectComponent("#custom-tab-bar"); // 给组件加 id
    console.log(tabBar);
    // 根据 currentPage 匹配 list 中的索引，设置 selected
    // const list = tabBar.data.list;
    // const index = list.findIndex(item => item.pagePath === currentPage);
    // if (index !== -1) {
    //   tabBar.setData({
    //     selected: index
    //   });
    // }
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})